<template>
  <div class="Toppadding" v-if="shop">
      <my-head title="商品详情"></my-head>
      <div class="shoubandetailed_main">
            <div class="swiper" v-if="images">
                <van-swipe :autoplay="2000">
                <van-swipe-item v-for="(item, index) in images" :key="index">
                    <img :src="item" />
                </van-swipe-item>
                </van-swipe>
            </div>
            <div class="swiper" v-else>          
                    <img :src="imgs" />       
            </div>

            <div class="shoubandetailed_main_price">{{shop.priceSymbol}} {{shop.priceDesc[0]}}</div>
            <div class="shoubandetailed_main_tit">
                    <p class="p1" v-if="shop.title">{{shop.title}}</p>
                    <p class="p1" v-else>{{shop.name}}</p>
                    <p></p>
                </div>

                 <van-cell-group >
              
                <van-cell title="商品单价" :value="(shop.priceDesc[0])+'元'"  />
                
                <van-cell title="购买数量"    >
                    <template #default>
                        <van-stepper  @change="changevalue" v-model.number="value" min="1" />
                    </template>
                </van-cell>

                <van-cell title="购买小计"  :value="((shop.priceDesc[0])* value) +'元'  "  />
            </van-cell-group>
      </div>
      <my-car :count='value'></my-car>
  </div>
</template>

<script>
export default {
data() {
    return {
        images:null,
        shop:null,
        value:1,
        imgs:null
    }
},
methods: {
      //数目框里面的值不能小于1
     changevalue(value){
            if(value<1){
                this.value = 1;
            }
        },
},
mounted() {
    this.images=this.$route.query.imageUrls
    console.log(this.images);
    this.shop=this.$route.query
    this.imgs=this.$route.query.img
     console.log(this.imgs);
     console.log(this.value);
},
}
</script>

<style>
.shoubandetailed_main .swiper{
    width: 100%;
     box-shadow: 0px 2px 5px #c5c4c4;
}
.shoubandetailed_main .swiper img{
    width: 100%;
}
.shoubandetailed_main_price{
    height: 43px;
    padding: 16px 12px 0px 12px;
    width: 100%;
    font-size: 20px;
    color: #fb7299;
    background: #fff;
}
.shoubandetailed_main_tit{
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 700;
     min-height: 63px;
    padding: 12px;
     overflow: hidden;
      background: #fff;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      margin-bottom: 10px;
}
.shoubandetailed_main_tit .p1{
    width: 300px;
    overflow: hidden;
}
</style>